Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(web): UX improvements for Repo and Cluster Views #110

Draft
wants to merge 1 commit into
base: main
Choose a base branch
from

Conversation

Kai-ros
Copy link
Contributor

@Kai-ros Kai-ros commented Mar 15, 2025

Context

Currently the Repo and Cluster Views (my terms) are not conducive to furthering a maintainer's understanding of their project's outstanding issues at a high-level, this work aims to provide a better experience when viewing all of a given repo's issues. Further documentation will be provided in the conversation for the attached issue.

NOTE: This is very much work-in-progress, it is not intended as the final state, more-so a vehicle to carry the conversation forward.

Current State:
image

Addresses:

Issue-19

@Kai-ros Kai-ros changed the title Repo and Cluster View UX Improvements feat(web): UX improvements for Repo and Cluster Views Mar 15, 2025
@danielroe
Copy link
Owner

I love the suggestions here. I think maybe a 'stack' of issues (where the titles are visible but fading out) might be a nice DX. And we could also allow the option of rendering these in a grid.

@Kai-ros
Copy link
Contributor Author

Kai-ros commented Mar 20, 2025

Great! To ensure clarity, I wanted to discuss a bit further to keep our mental models aligned.

Overview

So if I understood correctly, this is what you meant above, so let's get into it!

image

NOTE: I forgot to recreate the Duplicates button but it would still be there but I suspect that is sorta its own flow and would require its own work.

Paper Stack Design

Like I mentioned before, this design moves in the direction of iconography, which I think is actually better for this app's purpose: providing the maintainers a high-level understanding of a given repo's Issues and allowing them to drill down into specifics as they choose.

Summary Item

I provided 2 options here but I don't think Variant 2 really adds so much other than to the visual UX, maybe it "feels" nicer to use? Hard for me to say. It would end up taking up more real estate on screen but maybe that's an acceptable trade-off if you like it enough.

image

Repo View

This would be what replaces the existing view in the app. Attention to the new Cluster View button.

image

Cluster Views

NOTE: These are the views the maintainer is presented with after selecting a given Cluster.

Variant 1

This is my personal preference between the two Variants but maybe you have a strong stance against overlays? Or maybe there's too much visual noise in the background? That we could blur out though.

image

Variant 2

This would route them to a new page/view which is less nice in my opinion but certainly more straightforward.

image

Window Pane Design

I would say this is for the maintainer who wants maximum information density, lots of words, lots of shapes, lots of colors.

Summary Item

This is a bit of a rework of the previous Grid Cell design but for an individual Cluster Summary.

image

Repo View

This would be what replaces the existing view in the app. Attention to the new Cluster View button.

image

Cluster Views

NOTE: These are the views the maintainer is presented with after selecting a given Cluster.

Variant 1

This is my personal preference between the two Variants but maybe you have a strong stance against overlays? Or maybe there's too much visual noise in the background? That we could blur out though.

image

Variant 2

This would route them to a new page/view which is less nice in my opinion but certainly more straightforward.

image

Open Questions:

  • Styling?
    • Will certainly try to maintain the existing styles as much as I am able but given that there will be new elements I will eventually have to make some choices so please let me know any strong opinions on buttons/text/symbols/etc as they come up.
  • Duplicates View?
    • Idk for sure but I have a sense this could become its own piece of work but I think this would reveal itself as we went forward.
  • Performance Impacts?
    • Just trying to look ahead and maybe either the Window Pane Design or the Cluster View Overlay could cause slow down, very much gonna leave the ball in your court on how to optimize for that if it arises though.
  • Unforeseen concerns?
    • You've definitely got the better oversight on this work, feel free to make me aware of anything I should be mindful of as I move forward.
  • How to decompose this work?
    • I am very happy to continue with this work but I would not want to deliver all of it in a single PR, that could take weeks, do you have a preference on this? I would break it into maybe 4 or 5 individual PRs, or it could be in a new branch with successive PRs, each implementing a new iteration progressively:
    • Scaffolding - To start I would want to rewrite the HTML/CSS of the current design to retain the existing responsiveness and working elements but to better prepare it to allow for the follow-on changes, such as a more strict componentry structure to let me better reason about it. This also serves the added benefit of more gradually introducing me to UnoCSS, so I can learn my way around it, as it is brand new to me. It just occurred to me, this better sets us up for eventually resolving Issue-17.
    • Paper Stack - New Summary Items, New Repo View, New Cluster View
    • Window Pane - New Summary Items, New Repo View, New Cluster View
    • View Toggle & Styling Pass - Swaps between the two design views, the toggle would likely be a very small amount of work but any lingering or emerging styling concerns could cause friction so I don't wanna over-promise on velocity.
    • Duplicates - Whatever extra work is needed there, hard to say for me right now.

Sorry for the wall of text/images in advance! Trying to reduce the amount of guesswork by leaning into communicating more up front. Looking forward to hearing your thoughts.

@danielroe Ping!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants